<section id="address-section">
  <h2 class="section-title">收货地址</h2>
  <p style="text-align:center; margin-bottom:2rem;">填写您的收货信息，我们将为您寄送精心制作的茯茶</p>
  <form class="address-form">
    <div>
      <label>姓名</label>
      <input type="text" placeholder="请输入您的姓名">
    </div>
    <div>
      <label>手机号码</label>
      <input type="tel" placeholder="请输入您的手机号码">
    </div>
    <div>
      <label>所在地区</label>
      <div style="display:flex; gap:1rem;">
        <select id="province-select">
          <option value="">请选择省</option>
          <option value="陕西省">陕西省</option>
        </select>
        <select id="city-select">
          <option value="">请选择市</option>
          <option value="咸阳市">咸阳市</option>
          <option value="西安市">西安市</option>
          <option value="宝鸡市">宝鸡市</option>
          <option value="渭南市">渭南市</option>
          <option value="铜川市">铜川市</option>
          <option value="延安市">延安市</option>
          <option value="榆林市">榆林市</option>
          <option value="汉中市">汉中市</option>
          <option value="安康市">安康市</option>
          <option value="商洛市">商洛市</option>
        </select>
        <select id="district-select">
          <option value="">请选择区/县</option>
          <!-- 根据市动态加载 -->
        </select>
      </div>
    </div>
    <div>
      <label>详细地址</label>
      <textarea placeholder="请输入详细地址信息，如街道、门牌号等"></textarea>
    </div>
    <div>
      <label>邮政编码</label>
      <input type="text" placeholder="请输入邮政编码">
    </div>
    <div>
      <label>
        <input type="checkbox"> 设为默认收货地址
      </label>
    </div>
    <button type="submit" style="width:100%; padding:1rem; background:#ff6b35; color:white; border:none; border-radius:10px; font-size:1.1rem; font-weight:600;">
      提交地址
    </button>
  </form>
</section>
<script>
  // 简单的省市区联动逻辑 (实际项目中应从后端获取)
  const cityData = {
    "咸阳市": ["秦都区", "杨陵区", "渭城区", "三原县", "泾阳县", "乾县", "礼泉县", "永寿县", "彬州市", "长武县", "旬邑县", "淳化县", "武功县"],
    "西安市": ["新城区", "碑林区", "莲湖区", "灞桥区", "未央区", "雁塔区", "阎良区", "临潼区", "长安区", "高陵区", "鄠邑区", "蓝田县", "周至县"],
    // ... 其他城市数据
  };

  document.getElementById('city-select').addEventListener('change', function() {
    const city = this.value;
    const districtSelect = document.getElementById('district-select');
    districtSelect.innerHTML = '<option value="">请选择区/县</option>';
    if (city && cityData[city]) {
      cityData[city].forEach(district => {
        const option = document.createElement('option');
        option.value = district;
        option.textContent = district;
        districtSelect.appendChild(option);
      });
    }
  });
</script>